<template>
  <div class="app-container home">
    <div class="top">
      <el-card class="card">
        <div style="display:flex">
          <div
            style="width:66px; height:66px; margin-right: 15px; text-align: center;line-height: 66px;background-color:#f2ebfb; border-radius: 50%;"
            class="left">123</div>
          <div class="right" style="height:66px">
            <div style="font-size: 18px; margin-top: 10px;">{{this.chargeData}}</div>
            <div>代收费数据（条）</div>
          </div>
        </div>
      </el-card>
      <el-card class="card">
        <div style="display:flex">
          <div
            style="width:66px; height:66px; margin-right: 15px; text-align: center;line-height: 66px;background-color:#edf8fe; border-radius: 50%;"
            class="left">123</div>
          <div class="right" style="height:66px">
            <div style="font-size: 18px; margin-top: 10px;">{{this.chargeMoney}}</div>
            <div>待收费金额（元）</div>
          </div>
        </div>
      </el-card>
      <el-card class="card">
        <div style="display:flex">
          <div
            style="width:66px; height:66px; margin-right: 15px; text-align: center;line-height: 66px;background-color:#fff7e4; border-radius: 50%;"
            class="left">123</div>
          <div class="right" style="height:66px">
            <div style="font-size: 18px; margin-top: 10px;">{{this.chargeDotData}}</div>
            <div>欠费数据（条）</div>
          </div>
        </div>
      </el-card>
      <el-card class="card">
        <div style="display:flex">
          <div
            style="width:66px; height:66px; margin-right: 15px; text-align: center;line-height: 66px;background-color:#fff2f5; border-radius: 50%;"
            class="left">123</div>
          <div class="right" style="height:66px">
            <div style="font-size: 18px; margin-top: 10px;">{{this.dotMoney}}</div>
            <div>欠费金额（元）</div>
          </div>
        </div>
      </el-card>
    </div>


    <el-row :gutter="10">
      <el-col :span="12">
        <el-card>
          <div style="width:100%;height:400px;" id="pei"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div style="width:100%;height:400px;" id="zhu"></div>
        </el-card>
      </el-col>
    </el-row>


  </div>
</template>

<script>
  import {
    getCount
  } from "@/api/asset/shops";
  import { listDateChargedata,
    listChargedata,
    getChargedata,
    getDataMoney 
  } from "@/api/feeSettings/chargedata";
  import * as echarts from 'echarts';
  const option = {
    title: {
      text: '商铺租售比率',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [{
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [

      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  };

  const option1 = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      data: [],
      axisTick: {
        alignWithLabel: true
      }
    }],
    yAxis: [{
      type: 'value'
    }],
    series: [{
      name: 'Direct',
      type: 'bar',
      barWidth: '60%',
      data: [],


    }]
  };

  export default {
    name: "Index",
    data() {
      return {
        // dateList:[], //获取前六个月日期
        chargeDotData:0,//欠费条数
        dotMoney: 0,//欠费金额
        currentBeijingTime: '', //当前北京时间
        chargeData: null, //代收费数据
        chargeMoney: 0, //代收费金额
        arr: []
      };
    },
    mounted() {



      this.getList();
      //
      let peiDom = document.getElementById('pei');
      let peiChart = echarts.init(peiDom);
      peiChart.setOption(option)

      let zhuDom = document.getElementById('zhu');
      let zhuChart = echarts.init(zhuDom);
      zhuChart.setOption(option1)
      getDataMoney().then(res=>{
        console.log("===============");
        console.log(res);
        option1.xAxis[0].data=res.data.time
        option1.series[0].data=res.data.money
               zhuChart.setOption(option1)
      })

      getCount(0).then(res => {
        option.series[0].data.push({
          value: res,
          name: "出租"
        })
        peiChart.setOption(option)
      })

      getCount(1).then(res => {
        option.series[0].data.push({
          value: res,
          name: "出售"
        })
        peiChart.setOption(option)
      })

      getCount(2).then(res => {
        option.series[0].data.push({
          value: res,
          name: "空置"
        })
        peiChart.setOption(option)
      })
    },

    // created() {
    //   this.getList();
    // },


    methods: {
      getCurrentBeijingTime() {
        const now = new Date(); // 假设这是UTC时间
        // 这里需要添加时区偏移量来转换为北京时间（东八区）
        now.setHours(now.getHours() + 8);
        this.currentBeijingTime = now;

      },

      //代收费数据条
      getList() {
        this.getCurrentBeijingTime();
        listChargedata(this.queryParams).then(response => {
          this.chargedataList = response.rows;
          // console.log(this.chargedataList);
          for (let i of this.chargedataList) {
            this.chargeMoney += i.money;
            if (i.paymentState == 0) {
              this.chargeData++;
              if (new Date(i.deadlineTime) < this.currentBeijingTime) {
                this.dotMoney += i.money;
                   this.chargeDotData++;
              }
            }

          }
        })
      }
    }
  }
</script>
<style scoped lang="scss">
  .top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
  }

  .card {
    padding-left: 30px;
    width: 23%;
    height: 140px;

  }

  * {
    padding: 0;
    border: 0;
  }
</style>
